<template>
	<view class="fullPage p30">
		<view class="container p24 bf border-r1">
			<view class="flex_aj ptb30">
				<view class="flex_aj w230 h230 b-green border-r50p">
					<image src="/static/huandian.png" mode="widthFix" style="width: 134upx;height: 100upx;"></image>
				</view>
			</view>

			<!-- 上次归还记录 start  -->
			<view class="mb30 plr24 pb30 bgf5 border-r1" v-if="info.oldBatteryNo">
				<view class="flex_sb h80 bdb">
					<text>上次归还记录</text>
					<text>{{ info.ctime }}</text>
				</view>
				<view>
					<view class="flex_a h70">
						<text class="flex1">换电柜编号：{{ info.diviceNo }}</text>
						<view class="w50 h50" @click="navigation">
							<image src="/static/daohang.png" mode="widthFix" style="width: 50upx;height: 50upx;">
							</image>
						</view>
					</view>
					<view class="h50">仓门号：{{ info.oldCabinetNo }}</view>
					<view class="h50">电池编号：{{ info.oldBatteryNo }}</view>
					<view class="c6">{{ info.deviceAddress }}</view>
				</view>
			</view>
			<!-- 上次归还记录 end -->
			<view class="pt10 bdt">
				<view class="flex pt20 mb10">
					<text class="whn">订单编号：</text>
					<text class="flex1">
						{{ info.orderNo }}
						<text class="plr10 warning ft26" v-if="info.status == 2 && info.btStatus != 1">请及时归还电池</text>
					</text>
					<text class="tae"
						:class="info.status == 0 ? 'warning' : info.status == 1 ? 'green' : info.status == 2 ? 'danger' : ''">
						{{ info.status == 0 ? '进行中' : info.status == 1 ? '已完成' : info.status == 2 ? '已逾期' : '--' }}
					</text>
				</view>
				<view class="mb10">套餐电池类型：{{ info.batteryTypeName }}V</view>
				<view class="mb10">套餐开始时间：{{ info.startTime }}</view>
				<view class="mb10">套餐结束时间：{{ info.mealTime }}</view>
				<view class="mb10">租赁时长：{{ info.rentTime || '--' }}</view>
				<view class="flex mb10">
					<text class="whn">电池押金：</text>
					<view class="flex1 flex">
						<text class="whn">{{ info.deposit }}元</text>
						<view class="pl10 ft24 c9">
							(套餐结束后可以在
							<text class="primary"
								@click="routerLink({ path: '/pages/user/wallet/index' })">“我的钱包”</text>
							中提现）
						</view>
					</view>
				</view>

				<view class="mb10">
					套餐费用：
					<text class="warning">{{ info.mealMoney }}元</text>
				</view>
				<!-- 已逾期 -->
				<view class="mb10" v-if="info.status == 2">
					逾期费用：
					<text class="warning">{{ info.overduePay }}元</text>
					<text class="ft24 c9">（已逾期{{ info.overdueTime }}天）</text>
				</view>

				<view class="mb10">总换电次数：{{ info.mealTotalNum }}次</view>
				<view class="mb10">剩余换电次数：{{ info.mealRestNum }}次</view>
				<view class="mb10">当前电池编号：{{ info.btStatus == 1 ? '已归还' : info.newBatteryNo }}</view>
			</view>


			<!-- 进行中 -->
			<view class="" v-if="info.status == 0">
				<view class="mb20 pt100">
					<u-button type="primary" shape="circle" @click="gohome">查看更换站点</u-button>
				</view>
				<view class="flex_sb mb20">
					<view class="w300">
						<u-button type="error" :custom-style="{ background: '#FF6600' }" @click="endMeal"
							shape="circle">提前结束套餐</u-button>
					</view>
					<view class="w300">
						<u-button type="warning" shape="circle"
							@click="routerLink({ path: '/pages/user/rentEle/package', query: { type: 2, deviceId: info.deviceId, deviceNo: info.deviceNo } })">
							续费套餐
						</u-button>
					</view>
				</view>
			</view>
			<!-- 已逾期 电池未归还 -->
			<view class="" v-if="info.status == 2 && info.btStatus != 1">
				<view class="mb20 pt100">
					<u-button type="primary" shape="circle" @click="gohome">查看归还站点</u-button>
				</view>
				<view class="mb20">
					<u-button type="primary" plain shape="circle"
						@click="routerLink({ path: '/pages/user/rentEle/package', query: { type: 2, deviceId: info.deviceId, deviceNo: info.deviceNo } })">
						续费套餐
					</u-button>
				</view>
			</view>
			<!-- 已完成  || 已逾期 电池已归还-->
			<view class="mb20 pt100" v-if="info.status == 1 || (info.status == 2 && info.btStatus == 1)">
				<u-button type="primary" shape="circle"
					@click="routerLink({ path: '/pages/user/rentEle/package', query: { type: 2, deviceId: info.deviceId, deviceNo: info.deviceNo } })">
					继续购买套餐
				</u-button>
			</view>

			<view class="mb20 c9 tac ft24">
				<view class="mb10">请在套餐结束前及时归还电池!否则</view>
				<view class="">
					<text>将收取{{ info.overduePrice || 0 }}元/天的逾期费，详情请看</text>
					<text class="primary"
						@click="routerLink({ path: '/pages/user/rentEle/protocol' })">《租赁电池套餐协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		exchangeOrderDetail,
		endMeal
	} from '@/api/user.js'
	export default {
		name: 'rentEleDetail',
		data() {
			return {
				orderNo: '',
				info: {}
			}
		},
		onLoad(e) {
			this.orderNo = e.orderNo
			this.exchangeOrderDetail()
		},
		methods: {
			async exchangeOrderDetail() {
				const res = await exchangeOrderDetail({
					orderNo: this.orderNo
				})
				this.info = res.data
			},
			// 提前结束套餐
			async endMeal() {
				if (this.info.btStatus == 1) {
					return this.toast('归还电池后才能结束套餐')
				}

				const result = await this.confirm({
					content: '提前结束套餐并不会返还套餐费用，确定要进行此操作吗'
				})

				if (result.confirm) {
					const res = await endMeal()
					this.exchangeOrderDetail()
				}
			},
			// 归还站点
			gohome() {
				uni.reLaunch({
					url: '/pages/main/map'
				})
			},

			navigation() {
				// let lng = this.info.lng
				// let lat = this.info.lat
				// // 因后端传过来的经纬度是百度的，所以要经过转化成腾讯经纬度
				// let pi = (3.14159265358979324 * 3000.0) / 180.0;
				// let x = lng - 0.0065;
				// let y = lat - 0.006;
				// let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
				// let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
				// lng = z * Math.cos(theta);
				// lat = z * Math.sin(theta);
				uni.getLocation({
					type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
					success: (res) => {
						uni.openLocation({
							scale: 18,
							latitude: this.info.lat * 1,
							longitude: this.info.lng * 1,
							// name: this.info.title,
							// address: this.info.address,
						})
					}
				})

			}

		}
	}
</script>

<style lang="scss"></style>